﻿<phone:PhoneApplicationPage
    x:Class="Animation.WP8.Experiments.Clock"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:es="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"
    xmlns:bam="clr-namespace:Brain.Animate;assembly=AnimationManager.WP8"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="False"
    DataContext="{Binding RelativeSource={RelativeSource Self}}"
    >

    <phone:PhoneApplicationPage.Resources>
        <Style x:Name="HoursBackStyle" TargetType="es:Arc">
            <Setter Property="Stroke" Value="#FF403B20" />
            <Setter Property="StrokeThickness" Value="50"/>
            <Setter Property="Margin" Value="120"/>
        </Style>
        <Style x:Name="HoursFrontStyle" TargetType="es:Arc">
            <Setter Property="Stroke" Value="#FFFFD706" />
            <Setter Property="StrokeThickness" Value="50"/>
            <Setter Property="Margin" Value="120"/>
        </Style>
        <Style x:Name="MinutesBackStyle" TargetType="es:Arc">
            <Setter Property="Stroke" Value="#FF40200E" />
            <Setter Property="StrokeThickness" Value="70"/>
            <Setter Property="Margin" Value="40"/>
        </Style>
        <Style x:Name="MinutesFrontStyle" TargetType="es:Arc">
            <Setter Property="Stroke" Value="#FFF25C05" />
            <Setter Property="StrokeThickness" Value="70"/>
            <Setter Property="Margin" Value="40"/>
        </Style>
        <Style x:Name="SecondsFrontStyle" TargetType="es:Arc">
            <Setter Property="Stroke" Value="#FFA62103" />
            <Setter Property="StrokeThickness" Value="30"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="StrokeStartLineCap" Value="Flat"/>
            <Setter Property="StrokeEndLineCap" Value="Triangle"/>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <bam:AnimationTrigger.Open>
            <bam:BounceInAnimation Duration="0.6"/>
        </bam:AnimationTrigger.Open>
        <bam:AnimationTrigger.Close>
            <bam:BounceOutAnimation Duration="0.6"/>
        </bam:AnimationTrigger.Close>

        <Grid x:Name="ContentPanel" Margin="12,0,12,0">

            <bam:AnimatingTextBlock 
                x:Name="animatingTitle" 
                Text="Animating Clock" 
                HorizontalAlignment="Center"
                FontFamily="Segoe WP Light" 
                FontSize="60" >
                <bam:AnimatingTextBlock.IdleAnimation>
                    <bam:WobbleAnimation/>
                </bam:AnimatingTextBlock.IdleAnimation>
            </bam:AnimatingTextBlock>


            <Grid Width="400" Height="400" Margin="25" VerticalAlignment="Center">
                <Grid.Projection>
                    <PlaneProjection RotationX="-45"/>
                </Grid.Projection>

                <es:Arc 
                    x:Name="HoursBackArc2"
                    StartAngle="0" EndAngle="360" Style="{StaticResource HoursBackStyle}"
                    StrokeThickness="30" Margin="120" />

                <es:Arc 
                    x:Name="HoursBackArc1"
                    StartAngle="0" EndAngle="360" Style="{StaticResource HoursBackStyle}"
                    StrokeThickness="35" Margin="135"/>

                <es:Arc 
                    x:Name="HoursArc2"
                    StartAngle="0" EndAngle="{Binding HoursDegrees}" Style="{StaticResource HoursFrontStyle}"
                    StrokeThickness="30" Margin="120"
                    />
                <es:Arc 
                    x:Name="HoursArc1"
                    StartAngle="0" EndAngle="{Binding HoursDegrees}" Style="{StaticResource HoursFrontStyle}"
                    StrokeThickness="35" Margin="135" />



                <es:Arc 
                    x:Name="MinutesBackArc2"
                    StartAngle="{Binding MinutesDegrees}" EndAngle="360" Style="{StaticResource MinutesBackStyle}" 
                    StrokeThickness="45" Margin="40" />
                <es:Arc 
                    x:Name="MinutesBackArc1"
                    StartAngle="{Binding MinutesDegrees}" EndAngle="360" Style="{StaticResource MinutesBackStyle}" 
                    StrokeThickness="40" Margin="70" />

                <es:Arc 
                    x:Name="MinutesArc2"
                    StartAngle="0" EndAngle="{Binding MinutesDegrees}" Style="{StaticResource MinutesFrontStyle}"
                    StrokeThickness="45" Margin="40"/>
                <es:Arc 
                    x:Name="MinutesArc1"
                    StartAngle="0" EndAngle="{Binding MinutesDegrees}" Style="{StaticResource MinutesFrontStyle}"
                    StrokeThickness="40" Margin="70"/>

                <es:Arc x:Name="SecondsArc"
                    StartAngle="0" EndAngle="{Binding SecondsDegrees}" Style="{StaticResource SecondsFrontStyle}" />

            </Grid>

            <Grid VerticalAlignment="Bottom" x:Name="TimeGrid" Margin="0,0,0,35" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="65*"/>
                    <ColumnDefinition Width="35*"/>
                </Grid.ColumnDefinitions>

                <bam:AnimatingTextBlock x:Name="animatingTime" Text="{Binding TheTime}" 
                                    Tap="AnimatingTime_OnTap" HorizontalAlignment="Right"
                                    FontFamily="Segoe WP Light" FontSize="100" >
                    <bam:AnimatingTextBlock.InAnimation>
                        <bam:BounceAnimation/>
                    </bam:AnimatingTextBlock.InAnimation>
                </bam:AnimatingTextBlock>

                <bam:AnimatingTextBlock 
                    x:Name="animatingSeconds" Text="{Binding TheSeconds}"
                    Grid.Column="1"
                    FontFamily="Segoe WP Light" FontSize="60" Margin="10,0,0,10"
                    VerticalAlignment="Bottom" HorizontalAlignment="Left" >
                    <bam:AnimatingTextBlock.InAnimation>
                        <bam:BounceAnimation/>
                    </bam:AnimatingTextBlock.InAnimation>
                </bam:AnimatingTextBlock>

            </Grid>

        </Grid>


    </Grid>

</phone:PhoneApplicationPage>